import React, { useEffect, useState } from 'react';
import {  Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
import axios from '../../components/service/request';
 
const Equdata = (props) => {

    const [sales, setSales] = useState([]);
    const [stores, setStores] = useState([]);
    const [outequNumber, setOutequNumber] = useState([]);
    const [repairEquNumber, setRepairEquNumber] = useState([]);
    const [inequNumber, setInequNumber] = useState([]);
    
    useEffect(() => { 
        axios.post('http://localhost:8080/admin/admin/lists').then(res => {
            if (res.code === 200) {
                setOutequNumber(res.data[0][0].outEquNumber)
                setRepairEquNumber(res.data[0][0].repairEquNumber)
                setInequNumber(res.data[0][0].inEquNumber)
            } else {  
                console.log("获取失败"); 
            }
        });
        
    })

    const getOption = (sal, sto) => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                show: true,
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    fontSize: 15,
                    color: '#6666FF',
                },
                data: ['在库设备', '借出设备', '维修设备']
            },
            series: [
                {
                    name: '设备分布',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '60%'],
                    data: [
                        { value: inequNumber, name: '在库设备'},
                        { value: outequNumber, name: '借出设备' },
                        { value: repairEquNumber, name: '维修设备' },
                    ],
                    itemStyle: {
                        emphasis: {
                          fontSize:"25px",
                        },
                    }
                },
                
            ]
        }
    };
 
    return (
        <div>
            <Row gutter={24}>
                <Col span={24}>
                    <ReactEcharts option={getOption(sales, stores)} style={{marginTop:"20px",marginLeft:"140px"}} />
                </Col>
            </Row>
        </div>
    )
}
 
export default Equdata